<template>
  <div>
    <a-modal v-model:open="open" @ok="handleOk" okText="确定">
      <template #title>
        <span>
          新增星驰卡券账户
          <a href="http://xingchi-trade.liangpiao.net.cn" target="_blank">（星驰卡券后台）</a>
        </span>
      </template>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <a-form ref="formRef" :model="formState">
          <a-form-item label="备 注" name="nickName">
            <a-input v-model:value="formState.nickName" placeholder="备注" style="width: 280px" />
          </a-form-item>

          <a-form-item label="K e y" name="appid">
            <a-input v-model:value="formState.appid" placeholder="Key" style="width: 280px" />
          </a-form-item>

          <a-form-item label="Secret" name="secret">
            <a-input v-model:value="formState.secret" placeholder="Secret" style="width: 270px" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import * as cardCouponsApi from '@/api/cardCoupons'
import { message } from 'ant-design-vue'

const open = ref<boolean>(false)

const showModal = () => {
  open.value = true
}

const handleOk = async () => {
  const params = {
    remark: formState.nickName,
    appId: formState.appid,
    secret: formState.secret,
  }
  try {
    let { state, data, message: msg } = await cardCouponsApi.xcUserDataInsert(params)
    if (state === 200) {
      message.success('新增成功~')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('获取91卡券授权链接失败~')
  }

  open.value = false
  emit('refresh')
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

const formRef = ref()
interface FormState {
  nickName?: string
  appid?: string
  secret?: string
}
const formState = reactive<FormState>({})
</script>
